import { Router, Route, Switch, Link, withRouter } from 'umi';
import { Breadcrumb, Alert } from 'antd';

const Apps = () => (
  <ul className="app-list">
    <li>
      <Link to="/apps/1">Application1</Link>：<Link to="/apps/1/detail">Detail</Link>
    </li>
    <li>
      <Link to="/apps/2">Application2</Link>：<Link to="/apps/2/detail">Detail</Link>
    </li>
  </ul>
);

const breadcrumbNameMap = {
  '/antd': 'antd',
  '/antd/breadcrumb2': 'breadcrumb2',
};
const Home = withRouter(props => {
  const { location } = props;
  console.log(location)
  const pathSnippets = location.pathname.split('/').filter(i => i);
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    console.log(url,breadcrumbNameMap[url])
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>{breadcrumbNameMap[url]}</Link>
      </Breadcrumb.Item>
    );
  });
  const breadcrumbItems = [
    <Breadcrumb.Item key="home">
      <Link to="/">Home</Link>
    </Breadcrumb.Item>,
  ].concat(extraBreadcrumbItems);
  return (
    <div className="demo">
      <Route render={() => <span>Home Page</span>} />
      <Breadcrumb>{breadcrumbItems}</Breadcrumb>
    </div>
  );
});

export default function Breadcrumb_demo2(){
    return <Home/>
}